<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="../../js/vue.js"></script>

</head>
<body>
    <div id="root">
        <h5>{{name}}</h5>
        <h5>当前n的值：<span v-text="n"></span></h5>
        <h5>放大10倍n的值<span v-big="n"></span></h5>
        <!-- <h5>放大10倍n的值<span v-big-number="n"></span></h5> -->
        <button @click="n++">点击n+1</button>
        <hr>
        <!-- 自动获取焦点 -->
        <input type="text" v-fnind:value="n" autofocus>
        <hr>
        <input type="text" v-fnind:value="n">
    </div>
</body>
<script type="text/javascript">
    Vue.config.performance = false;
    // 全局指令
    Vue.directive('fnind2', {
        bind(el, binding, vnode) {},
        inserted(el, binding, vnode) {},
        update(el, binding, vnode, oldVnode) {},
        componentUpdated(el, binding, vnode) {},
        unbind(el, binding, vnode) {},
    });

    const vm = new Vue({
        el:'#root',
        data:{
            name:'hello',
            n:3,
        },
        directives: {
            // 指令和元素绑定时被调用
            // 指令所在的模板被解析时
            big(el, binding, vnode) {
                console.log(el,binding)
                el.innerText=binding.value * 10
            },
            /* 'big-number':(el, binding, vnode) {
                console.log(el,binding)
                el.innerText=binding.value * 10
            }, */
            //执行多个函数
            fnind:{
                // 指令和元素绑定时被调用
                bind (el, binding, vnode) {
                    el.value=binding.value
                    console.log('bind')
                },
                // 指令所在的元素被插入页面时
                // 获取焦点，父元素。。。
                inserted (el, binding, vnode) {
                    console.log('inserted')
                    el.focus()
                },
                // 指令所在的模板重新解析时
                update (el, binding, vnode, oldVnode) {
                    console.log('update')
                    el.value=binding.value
                },
            }
        },
    })

</script>
</html>